<template>
  <!-- 容器 -->
	<div id="main" class ="container">
		
		<!-- 面包屑导航 -->
		<ul class="breadcrumb mt-2 bg-transparent">
			<li class="breadcrumb-item">
				<a class="text-muted text_small" href="">首页</a>
			</li>
			<li class="breadcrumb-item">
				<a class="text-muted text_small" href="">学习用品</a>
			</li>
			<li class="breadcrumb-item">
				<a class="text-muted text_small" href="">笔记本电脑</a>
			</li>
			<li class="breadcrumb-item">
				<a class="text-muted text_small" href="">AppleMac</a>
			</li>
		</ul>
		
		<!-- 主体 -->
		<div class="row mx-0">
			
			<!-- 左 -->
			<div class="col-lg-6 col-sm-12">
				<!-- 视图 -->
				<img class="w-100" src="img/products/57b12a31N8f4f75a3.jpeg" >
				<!-- 小图 -->
				<ul class="mt-2 list-unstyled d-flex justify-content-start my_img1">
					<li><img src="img/products/57b12a31N8f4f75a3.jpeg" ></li>
					<li><img src="img/products/57b12a31N8f4f75a3.jpeg" ></li>
					<li><img src="img/products/57b12a31N8f4f75a3.jpeg" ></li>
				</ul>
			</div>
			
			
			<!-- 右 -->
			<div id="details" class="col-lg-6 col-sm-12">


				<!-- 标题 -->
				<h4 v-text="p.title"></h4>
				
				<h6><a class="text-dark text_small font-weight-bold" href="" v-text="p.subtitle"></a></h6>


				<!-- 学员售价/服务承诺 -->
				<div class="alert alert-secondary text-muted text_small">
					<span>学员售价：</span>
					<h3 class="text-primary d-inline-block mb-0" v-text="`￥${p.price.toFixed(2)}`"></h3>
					<div>服务承诺：<span v-text="p.promise"></span></div>
				</div>

				<!-- 客服 -->
				<div class="d-flex align-content-center">
					<p class="mb-0">客服：</p>
					<a class="text_small text-dark" href="">
						联系客服
						<img class="mb-3" src="img/detail/kefuf.gif" >
					</a>
				</div>
				
				<!-- 规格 -->
				<div class="d-flex align-content-center">
					<div class="w-25 mb-0">规格：</div>
					<div class="d-flex flex-wrap">
						<a class="btn btn-outline-primary" href="">双核i5/8GB内存</a>
						<a class="btn btn-outline-primary" href="">闪存双核i5/8GB内存</a>
						<a class="btn btn-outline-primary" href="">定制款：双核i7/8G内存</a>
						<a class="btn btn-outline-primary" href="">定制款：双核i7/8G内存/256G闪存</a>
					</div>
				</div>

				<!-- 数量 -->
				<div class="mt-2">
					<div class="float-left">数量：</div>
					<div class="input-group mb-3 w-25">
						<div class="input-group-prepend">
							<button class="btn btn-outline-secondary p-1" type="button">-</button>
						</div>
						<input type="text" value="1" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1"/>
						<div class="input-group-append">
							<button class="btn btn-outline-secondary p-1" type="button">+</button>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>


				<!-- 购买部分 -->
				<div>

					<a class="btn pt-3 pb-2 pl-5 pr-5 mr-2" href="javascript:;"><h5>立即购买</h5></a>

					<a class="btn btn-primary pt-3 mr-2" href="javascript:;">
	            <h5><img src="/img/product_detail/product_detail_img7.png" alt=""> 加入购物车</h5>
	          </a>

					<a class="btn btn-primary pt-1 pb-1 collection " href="javascript:;">
	            <img src="/img/product_detail/product_detail_img6.png">
	            <br>
	            收藏
	          </a>
				</div>

			</div>
		</div>



		<!-- 推荐轮播 -->
	  <div class="container mb-5">
			<h4 class="d-inline-block ml-3">为你推荐</h4>
			<h6 class="d-inline-block bg-dark text-white ml-2">大家都在看</h6>
			<div id="recommend" class="border pl-3">
				<ul class="list-unstyled" style="width: 1100px; margin-left:-220px;">
					<li class="float-left">
						<div class="card mb-1 p-4 border-0 bg-transparent box-shadow">
							<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" src="/img/product_detail/product_detail_1.png" data-holder-rendered="true">
							<div class="card-body p-0">
								<p class="card-text text-center text_small">ThinkPad New S2 (20GUA00QCD)13.3英寸超霸</p>
							</div>
						</div>
					</li>
					<li class="float-left">
						<div class="card mb-1 p-4 border-0 bg-transparent box-shadow">
							<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" src="/img/product_detail/product_detail_2.png" data-holder-rendered="true" >
							<div class="card-body p-0">
								<p class="card-text text-center text_small">戴尔 DELL燃7000 R1605S 超霸</p>
							</div>
						</div>
					</li>
					<li class="float-left">
						<div class="card mb-1 p-4 border-0 bg-transparent box-shadow">
							<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" src="/img/product_detail/product_detail_3.png" data-holder-rendered="true" >
							<div class="card-body p-0">
								<p class="card-text text-center text_small">戴尔(DELL)魔方15MF Pro-R2505TSS灵</p>
							</div>
						</div>
					</li>
					<li class="float-left">
						<div class="card mb-1 p-4 border-0 bg-transparent box-shadow">
							<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" src="/img/product_detail/product_detail_4.png" data-holder-rendered="true" >
							<div class="card-body p-0">
								<p class="card-text text-center text_small">联想(Lenovo) YOGA900 (YOGA4 PRO)多彩版</p>
							</div>
						</div>
					</li>
					<li class="float-left">
						<div class="card mb-1 p-4 border-0 bg-transparent box-shadow">
							<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" src="/img/product_detail/product_detail_1.png" data-holder-rendered="true">
							<div class="card-body p-0">
								<p class="card-text text-center text_small">ThinkPad New S2 (20GUA00QCD)13.3英寸超霸</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		


		<!-- 标签定义导航链接的部分 -->
		<!-- 商品详情/商品评价/加入购物车 -->
		<nav class="navbar flex-md-nowrap p-0 ml-3">
			<!-- 商品详情/商品评价 -->
	    <form class="form-inline pl-2">
				<!-- 商品详情 -->
	      <button class="btn bg-transparent rounded-0 pt-3 pb-2 active" type="button"><h5>商品详情</h5></button>
				<!-- 商品评价 -->
	      <button class="btn bg-transparent rounded-0 pt-3 pb-2" type="button"><h5>商品评价</h5></button>
	    </form>

	    <ul class="navbar-nav">
				<!-- 加入购物车 -->
	      <li class="nav-item text-nowrap">
	        <a class="btn btn-primary p-3 border-bottom" href="javascript:;">
	          <h5><img src="/img/product_detail/product_detail_img7.png" alt=""> 加入购物车</h5>
	        </a>
	      </li>
	    </ul>
	  </nav>




		<div id="params" class="container">

			<!-- 右边浮动列表 -->
	    <div class="row mr-1">

				<!-- 规格参数标题 -->
	      <div class="col-md-10 pt-5">
	        <a name="规格参数"></a>
	        <h6 class="d-inline-block ml-3">规格参数 <img src="/img/product_detail/product_detail_icon_1.png" alt=""></h6>
	        <div class="pl-3">
	          <ul class="list-unstyled">
	            <li class="float-left mb-2"><a class="text-muted small" href="javascript:;" v-cloak>商品名称：{{p.lname}}</a></li>
	            <li class="float-left mb-2"><a class="text-muted small" href="javascript:;" v-cloak>系统：{{p.os}}</a></li>
	            <li class="float-left mb-2"><a class="text-muted small" href="javascript:;" v-cloak>内存容量：{{p.memory}}</a></li>
	            <li class="float-left mb-2"><a class="text-muted small" href="javascript:;" v-cloak>分辨率：{{p.resolution}}</a></li>
	            <li class="float-left mb-2"><a class="text-muted small" href="javascript:;" v-cloak>显卡型号：{{p.video_card}}</a></li>
	            <li class="float-left mb-2"><a class="text-muted small" href="javascript:;" v-cloak>处理器：{{p.cpu}}</a></li>
	            <li class="float-left mb-2"><a class="text-muted small" href="javascript:;" v-cloak>显存容量：{{p.video_memory}}</a></li>
	            <li class="float-left mb-2"><a class="text-muted small" href="javascript:;" v-cloak>分类：{{p.category}}</a></li>
	            <li class="float-left mb-2"><a class="text-muted small" href="javascript:;" v-cloak>硬盘容量：{{p.disk}}</a></li>
	          </ul>
	        </div>
	        <a name="商品介绍"></a>
	        <h6 class="d-inline-block mt-4 mb-3 ml-3">商品介绍 <img src="/img/product_detail/product_detail_icon_4.png" alt=""></h6>
	        <div> 
	          <div>   
	            <div>
	              <img alt="" src="/img/product/detail/57b15612N81dc489d.jpg">   
	            </div>  
	          </div>
	          <div>   
	            <div>    
	              <img alt="" src="/img/product/detail/57b15616N1e285f09.jpg">   
	            </div>  
	          </div>
	          <div>   
	            <div class="pl-3 small">技术规格请前往 www.apple.com/cn/macbook-air/specs.html 查看完整内容。</div>
	          </div>
	        </div>
	        <a name="售后保障"></a>
	        <h6 class="d-inline-block mt-4 mb-3 ml-3">售后保障 <img src="/img/product_detail/product_detail_icon_3.png" alt=""></h6>
	        <div class="pl-3"> 
	          <div>
	            <p class="text-primary font-weight-bold">
	              <img src="/img/product_detail/product_detail_img16.png" alt="">
	              正品保障
	            </p>
	            <p class="small">
	              达内学子商城向您保证所售商品均为正品行货，达内自营商品开具机打发票或电子发票。
	            </p>
	            <p class="text-primary font-weight-bold">
	              <img src="/img/product_detail/product_detail_img16.png" alt="">
	              全国联保
	            </p>
	            <p class="small">
	              凭质保证书及达内商城发票，可享受全国联保服务，与您亲临商场选购的商品享受相同的质量保证。达内商城还为您提供具有竞争力的商品价格和运费政策，请您放心购买！
	              注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
	            </p>
	          </div>
	        </div>
	        <a name="包装清单"></a>
	        <h6 class="d-inline-block mt-4 mb-3 ml-3">包装清单 <img src="/img/product_detail/product_detail_icon_2.png" alt=""></h6>
	        <div class="pl-3">
	          <p class="small">笔记本 x1 适配器 x1 电源线 x1 电池 x1 说明书（电子版）x1 备注：笔记本电脑的背面只会标注此电脑的系列，例如： XPS 13-9360 ，如果您需要核实此电脑的具体配置型号是否与达内页面相符，可电话咨询达内厂商：800-858-2969</p>
	        </div>
	      </div>

				<!-- 规格参数内容 -->
	      <div class="col-md-2 mb-4 pt-5 pl-2">

					<!-- 规格参数 -->
	        <a class="btn bg-transparent p-3 pl-4 pr-4 mb-2" href="#规格参数">
	          <h5 class="text-dark mb-0"><img src="/img/product_detail/product_detail_icon_g_1.png" alt=""> 规格参数</h5>
	        </a>

					<!-- 商品介绍 -->
	        <a class="btn bg-transparent p-3 pl-4 pr-4 mb-2" href="#商品介绍">
	          <h5 class="text-dark mb-0k"><img src="/img/product_detail/product_detail_icon_t_1.png" alt=""> 商品介绍</h5>
	        </a>

					<!-- 售后保障 -->
	        <a class="btn bg-transparent p-3 pl-4 pr-4 mb-2" href="#售后保障">
	          <h5 class="text-dark mb-0"><img src="/img/product_detail/product_detail_icon_d_1.png" alt=""> 售后保障</h5>
	        </a>

					<!-- 包装清单 -->
	        <a class="btn bg-transparent p-3 pl-4 pr-4 mb-2" href="#包装清单">
	          <h5 class="text-dark mb-0"><img src="/img/product_detail/product_detail_icon_bao_1.png" alt=""> 包装清单</h5>
	        </a>

					<!-- 回到顶部 -->
	        <a class="btn bg-transparent p-3 pl-4 pr-4 mb-2" href="#header">
	          <h5 class="text-dark mb-0"><img src="/img/product_detail/product_detail_icon_up_1.png" alt=""> 回到顶部</h5>
	        </a>

	      </div>
	    </div>
	  </div>



	</div>

</template>
<script>
export default {
	props:["lid"],
	data() {
		return {
			p:{price:0},
			specs:[],
			pics:[]
		}
	},
  mounted() {
		console.log(`页面内容挂载完成后发送请求...`);
		// 使用axios传输
		this.axios.get("/details",{params:{lid:this.lid}})
		.then(result=>{
			// result.data的数据赋值到this.p中
			this.p=result.data.product;
			this.specs=result.data.specs;
			this.pics=result.data.pics;
		})
	},
}
</script>
<style scoped>
[v-cloak]{ display: none; }

/* 定制面包屑导航的规格 */
.breadcrumb-item+.breadcrumb-item:before{
	content: ">";
}

/* 定制图片的规格 */
.my_img1 img{
	width: 5rem;
	margin-right: 0.5rem;
}



/*定制数量按钮的颜色*/
#details>div:nth-child(6) .btn-outline-secondary{
	width:30px;
}
#details>div:nth-child(6) .btn-outline-secondary:hover,
#details>div:nth-child(6) .btn-outline-secondary:active,
#details>div:nth-child(6) .btn-outline-secondary:focus{
	color:#6c757d;
	background-color:#f5f5f5;
	border-color:#0069d9;
	box-shadow: none;
}

/*定制立即购买按钮背景色*/
#details>div:nth-child(7)>a:first-child{
	background:linear-gradient(to bottom,#f0f0f0,#e0e0e0);
}



/*定制为你推荐部分的样式*/
#recommend{
	width:915px;
	border-color: 1px solid rgba(0, 0, 0, 0.125);
	overflow:hidden;
}
#recommend>ul>li{
	width:220px;
}

/*订制商品详情部分的样式*/
	#main>nav.navbar{
	  background:linear-gradient(to bottom,#f0f0f0,#e0e0e0);
	  box-shadow:0px 3px 6px #ccc
	}
	#main>nav.navbar .active{
	  margin-top:2px;
	  border-bottom:3px solid #0069d9;
	}
	#params .col-md-2>.btn{
	  background: linear-gradient(to bottom,#f0f0f0,#e0e0e0);
	  box-shadow:0px 3px 4px #ccc
	}
	#params .col-md-10>div>ul>li{
	  width: 237px;
	}

	
</style>